<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>英语口语练习页面</title>

</head>

<body>
  <!-- 顶部信息栏 -->
  <div class="top-info">
    <div class="shijian">2025年2月3日 </div>
    <div class="kecheng">英语口语练习</div>
 
  </div>
  <div class="meeting-duration">02 : 20 : 34</div>
  <!-- 主内容区域 -->
  <div class="main-content">
    <!-- 视频区域 -->
    <div class="video-area">
      <button class="record-button">课程录制</button>
    </div>
    <!-- 侧边栏 -->
    <div class="side-panel">
      <!-- 成员列表 -->
      <div class="member-list">
        <h3>成员 20人</h3>
        <div >
          <span>姓名</span>
          <span>主持人</span>
          <span lyy><img src="./image/开麦.png" alt="麦克风" class="ms"></span>
          <span><img src="./image/打开摄像头.png" alt="摄像头" class="ms"></span>
        </div>
        <div>
          <span>姓名(我)</span>
          <span></span>
          <span><img src="./image/开麦.png" alt="麦克风" class="ms"></span>
          <span><img src="./image/摄像头.png" alt="摄像头" class="ms"></span>
        </div>
        <div>
          <span>姓名</span>
          <span></span>
          <span><img src="./image/麦克风.png" alt="麦克风" class="ms"></span>
          <span><img src="./image/打开摄像头.png" alt="摄像头" class="ms"></span>
        </div>
        <div>
          <span>姓名</span>
          <span></span>
          <span><img src="./image/麦克风.png" alt="麦克风" class="ms"></span>
          <span><img src="./image/摄像头.png" alt="摄像头" class="ms"></span>
        </div>
        <div>
          <span>姓名</span>
          <span></span>
          <span><img src="./image/麦克风.png" alt="麦克风" class="ms"></span>
          <span><img src="./image/摄像头.png" alt="摄像头" class="ms"></span>
        </div>
      </div>
      <!-- 提问区 -->
      <div class="question-area">
        <h3>提问区</h3>
        <div>
          <span class="xm">姓名</span>
          <input type="text" placeholder="内容" class="neirong">
        </div>
        <div>
          <span class="xm">姓名</span>
          <input type="text" placeholder="内容" class="neirong">
        </div>
        <div>
          <span class="xm">姓名</span>
          <input type="text" placeholder="内容" class="neirong">
        </div>
        <div>
          <span class="xm">姓名</span>
          <input type="text" placeholder="内容" class="neirong">
        </div>
        <div>
          <span class="xm">姓名</span>
          <span><input type="text" placeholder="内容" class="neirong"><button class="send-botton"><img src="./image/发送.png" alt="发送" class="send" ></button></span>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部操作栏 -->
  <div class="bottom-actions">
    <button class="action-button"><img src="./image/麦克风.png" alt=" 麦克风" class="tu"> 麦克风</button>
    <button class="action-button"><img src="./image/摄像头.png" alt=" 摄像头" class="tu"> 摄像头</button>
    <button class="action-button"><img src="./image/共享屏幕.png" alt=" 共享屏幕" class="tu"> 共享屏幕</button>
    <button class="action-button"><img src="./image/邀请.png" alt="邀请" class="tu"> 邀请</button>
    <button class="action-button"><img src="./image/成员.png" alt="成员" class="tu"> 成员</button>
    <button class="action-button"><img src="./image/提问.png" alt="提问" class="tu"> 提问</button>
    <button class="action-button"><img src="./image/录制.png" alt="录制" class="tu"> 录制</button>
    <button class="action-button"><img src="./image/文档.png" alt="文档" class="tu"> 文档</button>
    <button class="action-button">退出课堂</button>
  </div>
</body>

</html>